import { useEffect, useRef } from 'react';
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.min.css';

const ImageViewer: React.FC = ({children})=>{
  const container = useRef(null);
  useEffect(()=>{
    const viewer = new Viewer(container.current as unknown as HTMLElement);
    const observer = new MutationObserver(()=>{
      viewer.update();
    });
    observer.observe(container.current as unknown as HTMLElement, {
      subtree: true,
      childList: true
    });
    return ()=>{
      observer.disconnect();
      viewer.destroy();
    }
  }, []);

  return <div ref={container}>
    {children}
  </div>
}

export default ImageViewer;